<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div style="color: :red;font-size: :20px;">
			我是王五
		</div>
		<div>
			我是张三
		</div>
		<div>
			我是李四
		</div>
		<button onclick=""changcolor()">
			变绿色
		</button>
		<button onclick=""removecolor()">
			取消颜色
		</button>
	</body>
	<script type="text/javascript">
		//childNodes获取孩子节点 数据
		//parentNode 获取父亲节点 单个对象
		//firstChild获取第一个子节点
		//lastChild获取最后一个子节点
		//nextSibing 获取下一个兄弟节点
		//previousSibing获取前一个兄弟节点
//		console.dir(document.documentElement.innerHTML)
//		console.dir(document.documentElement.childNodes[2].childNodes[1])
		let myDiv=document.documentElement.childNodes[2].childNodes[1]
		let myBody=myDiv.parentNode
//		console.dir(myDiv)
		
		let zhangsan = myDiv.nextSibling.nextSibling
		let wangwu=zhangsan.previousSibling.previousSibling
//		console.dir(zhangsan.innerText)
		console.dir(wangwu.getAttribute("style"))
		//getAttribute('name',value)
		wangwu.setAttribute("style","color:green")
		console.dir(wangwu.getAttribute("style"))
//		console.dir(zhangsan.previousSibling.previousSibling.innerHTML)
//removeAttribute  移除对象属性值	
		function changcolor(){
//			wangwu.setAttribute('style','color :green')
			wangwu.style.color='green'
			wangwu.style.fontSize='50px'
			wangwu.className=""
			//font-size
		}
		function removecolor(){
//			wangwu.removeAttribute()('style')
			wangwu.style.display='none'
		}
//		console.dir(myDiv)
//		console.dir(document.documentElement.childNodes)
		
//		console.dir(document.documentElement.innerText)
	</script>
</html>
